<!--
 * @Author: your name
 * @Date: 2021-12-27 13:14:47
 * @LastEditTime: 2021-12-27 13:28:20
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \app\src\views\el\cssSkew\index.vue
-->
<template>
  <div class="css-skew">
    <div class="btn-box">
      <div class="box-btn left">添加</div>
      <div class="box-btn right">已添加</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.css-skew {
  padding: 10px;
  .btn-box {
    display: flex;
  }
  .box-btn {
    background-color: antiquewhite;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: relative;
    margin-right: 2px;
    &::before {
      content: "";
      display: inline-block;
      border: 15px solid antiquewhite;
      position: absolute;
      border-radius: 30px;
    }
    &.left {
      transform: skew(-20deg);
      border-radius: 0px 4px 4px 10px;
      &::before {
        transform: skew(20deg);
        left: -12px;
      }
    }
    &.right {
      transform: skew(-20deg);
      border-radius: 3px 10px 0 4px;
      &::before {
        transform: skew(20deg);
        right: -13px;
      }
    }
  }
}
</style>